<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery模拟水果机特效插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>

		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2.0">

		<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
		
		<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="src/jquery.slotmachine.js"></script>

	</head>

	<body>

		<div id="header" class="container">
			
			<div class="row content">
				<div class="col-md-12 col-lg-8 col-lg-offset-2 text-center">
					<div style="display: inline-block;">THIS PLUGIN: </div>
						
					<div id="textMachine">
						<div>IS AWESOME!</div>
						<div>ROCKS!</div>
						<div>IS EASY TO USE</div>
						<div>IS PRODUCT OF BOREDOM</div>
					</div>
					<script>
						$(document).ready(function(){
							$("#textMachine").slotMachine({
								active	: 1,
								delay	: 450,
								auto	: 1500
							});
						});
					</script>
				</div>

				<div class="col-md-12 col-lg-8 htmldemo">
					<p class="text-center">更多精彩内容请关注：<a href="http://www.htmleaf.com/" target="_blank">jQuery之家</a></p>
				</div>
			</div>
			
		</div>
		
		<div class="line">
			
			<div class="content container" style="text-align: center">
				
				<h1>Randomize your machines:</h1>
				
				<div class="row">
					<div class="col-xs-12 col-md-6 col-md-offset-3 machineContainer">
						<div id="machine1" class="slotMachine">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machine2" class="slotMachine">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machine3" class="slotMachine">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machine1Result" class="col-xs-4 machineResult">Index: 0</div>
						<div id="machine2Result" class="col-xs-4 machineResult">Index: 1</div>
						<div id="machine3Result" class="col-xs-4 machineResult">Index: 2</div>
					</div>
					
					<div class="col-md-2">
						<div id="slotMachineButton1" class="slotMachineButton">GO!</div>
					</div>
					
				</div>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				var machine1 = $("#machine1").slotMachine({
					active	: 0,
					delay	: 500
				});
				
				var machine2 = $("#machine2").slotMachine({
					active	: 1,
					delay	: 500
				});
				
				var machine3 = $("#machine3").slotMachine({
					active	: 2,
					delay	: 500
				});
				
				function onComplete(active){
					switch(this.element[0].id){
						case 'machine1':
							$("#machine1Result").text("Index: "+this.active);
							break;
						case 'machine2':
							$("#machine2Result").text("Index: "+this.active);
							break;
						case 'machine3':
							$("#machine3Result").text("Index: "+this.active);
							break;
					}
				}
				
				$("#slotMachineButton1").click(function(){
					
					machine1.shuffle(5, onComplete);
					
					setTimeout(function(){
						machine2.shuffle(5, onComplete);
					}, 500);
					
					setTimeout(function(){
						machine3.shuffle(5, onComplete);
					}, 1000);
					
				})
			});
		</script>
		
		
		<div class="line">
			
			<div class="content" style="text-align: center">
				
				<h1>Trick your results:</h1>
				
				<div class="row">
					<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-5 machineContainer">
						<div id="machineFake1" class="slotMachine" style="width:100%;">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machineFakeResult" class="machineResult noBorder">Index: 0</div>
					</div>
					
					<div class="col-xs-1 col-xs-push-1">
						<div id="slotMachineButtonFake" class="slotMachineButton" style="margin-right: 40px">GO!</div>
					</div>
						
					<div class="col-xs-5 col-xs-offset-1 col-xs-pull-6 col-sm-2 col-md-offset-1 machineContainer">
						<div id="machineFake2" class="slotMachine" style="width:100%;">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machineFakeResultStatic" class="machineResult noBorder">Index: 1</div>
					</div>
				</div>
				
			</div>
			
			<div class="clearfix"></div>
		</div>
		<script>
			$(document).ready(function(){
				//Fake machine 1
				window.machine1 = $("#machineFake1").slotMachine({
					active: 1,
					randomize : function(activeElementIndex){
						return 1;
					}
				});
				
				$("#slotMachineButtonFake").click(function(){
					machine1.shuffle(3, function(){
						$("#machineFakeResult").text("Index: " + this.active);
					});
				});
				
				//Fake machine 2 - auto
				var machine2 = $("#machineFake2").slotMachine({
					active	: 1,
					delay	: 500,
					auto	: 1500,
					complete: function(){
						$("#machineFakeResultStatic").text("Index: " + this.active);
					}
				});
				machine2.setRandomize(function(){
					return 1;
				});
			});
		</script>
		
		
		<div class="line" style="padding-top:50px;">
			
			<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;">
				
				<h1>Feel free to build your oun casino!</h1>
				
				<div style="clear:both; padding-top: 215px;width: 335px;margin: 0 auto;">
					<div id="machine4" class="slotMachine" style="margin-left: -65px;">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					
					<div id="machine5" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					
					<div id="machine6" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					
				</div>
				
			</div>
			
			<div class="content text-center">
				<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div>
				<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div>
			</div>
			<div class="clearfix"></div>
			
		</div>
		<script>
			$(document).ready(function(){
				var machine4 = $("#machine4").slotMachine({
					active	: 0,
					delay	: 500
				});
				
				var machine5 = $("#machine5").slotMachine({
					active	: 1,
					delay	: 500
				});
				
				window.machine6 = $("#machine6").slotMachine({
					active	: 2,
					delay	: 500
				});
				
				var started = 0;
				
				$("#slotMachineButtonShuffle").click(function(){
					started = 3;
					machine4.shuffle();
					machine5.shuffle();
					machine6.shuffle();
				});
				
				$("#slotMachineButtonStop").click(function(){
					switch(started){
						case 3:
							machine4.stop();
							break;
						case 2:
							machine5.stop();
							break;
						case 1:
							machine6.stop();
							break;
					}
					started--;
				});
			});
		</script>
		
		
		<div class="line">
			
			<div class="content" style="text-align: center">
				
				<h1>Or simply use it like a slide:</h1>
				
				<div class="row">
					
					<div class="col-sm-1 col-sm-offset-4">
						<div id="slotMachineButtonPrev" class="slotMachineButton" style="font-size: 30px; margin-left: 0px">PREV</div>
					</div>
					
					<div class="col-xs-10 col-xs-offset-1 col-md-offset-0 col-sm-2 machineContainer">
						<div id="machine7" class="slotMachine" style="width:100%;">
							<div class="slot slot1"></div>
							<div class="slot slot2"></div>
							<div class="slot slot3"></div>
							<div class="slot slot4"></div>
							<div class="slot slot5"></div>
							<div class="slot slot6"></div>
						</div>
						
						<div id="machineResultSlider" class="machineResult noBorder">Index: 1</div>
					</div>
					
					<div class="col-sm-1">
						<div id="slotMachineButtonNext" class="slotMachineButton" style="font-size: 30px">NEXT</div>
					</div>
				</div>
				
			</div>
		</div>
		<script>
				$(document).ready(function(){
					var machine7 = $("#machine7").slotMachine({
						active	: 0,
						delay	: 500,
						complete: function(){
							$("#machineResultSlider").text("Index: " + this.active);
						},
					});
					
					$("#slotMachineButtonPrev").click(function(){
						machine7.prev();
					});
					
					$("#slotMachineButtonNext").click(function(){
						machine7.next();
					});
				});
			</script>
		
		
		<div id="footer">
			<div class="content">
				<div id="textMachine2" style="text-align: center">
					<div>FORK!</div>
					<div>SHARE!</div>
					<div>USE IT!</div>
				</div>
				<script>
					$(document).ready(function(){
						$("#textMachine2").slotMachine({
							active	: 1,
							delay	: 450,
							auto	: 1500
						});
					});
				</script>
			</div>
		</div>

	</body>
</html>
